<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15.4.DOM-操作元素-元素属性的操作-练习1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
            width: 900px;
            margin: 0 auto;
        }

        div {
            width: 900px;
            height: 30px;
            line-height: 30px;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            margin: 0 auto;
            text-align: center;
            font-size: 20px;
            font-weight: 700;
        }
    </style>
</head>

<!-- 案例 -->
<!-- 分时显示不同图片，显示不同问候语 -->
<!-- 根据时间不同，页面显示不同的图片，同时显示不同的问候语 -->
<!-- 如果上午时间打开页面，显示上午好，显示上午图片 -->
<!-- 如果下午时间打开页面，显示下午好，显示下午图片 -->
<!-- 如果晚上时间打开页面，显示晚上好，显示晚上图片 -->
<!-- 分析 -->
<!-- （1）根据系统不同时间来判断 需要用到日期内置对象 -->
<!-- （2）利用多分支语句来设置不同的图片 -->
<!-- （3）需要一个图片，并根据事件修改图片，就需要用到操作元素src属性 -->
<!-- （4）需要一个div元素，显示不同问候语，修改元素内容即可 -->

<body>
    <img src="images/DOM-3.jpg" alt="">
    <div>上午好</div>
    <script>
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        // 2.得到当前小时数
        var date = new Date();
        var h = date.getHours();
        //3.判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/DOM-3.jpg'
            div.innerHTML = '上午好'
        } else if (h < 18) {
            img.src = 'images/DOM-4.jpg'
            div.innerHTML = '下午好'
        } else {
            img.src = 'images/DOM-5.jpg'
            div.innerHTML = '晚上好'
        }
    </script>
</body>

</html>